<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jerry Qu's HTML document</title>
    <meta http-equiv="Pragma" content="no-cache" />  
    <meta http-equiv="Cache-Control" content="no-cache" />     
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="ImageToolbar" content="no" />
	<script type="text/javascript" src="main.js"></script>
    <style type="text/css" title="default" media="screen">
    /*<![CDATA[*/

    /*]]>*/
    </style>
    </head>
	<body>
		<h3>点击小球</h3>
		<div id="test1" style="cursor:pointer;position:absolute;top:50px;left:20px;width:64px;height:64px;background:url(img/ball.png)"></div>
		<script type="text/javascript">
			var Anim = QW.ElAnim,
				Dom = QW.Dom,
				NodeW = QW.NodeW,
				$ = Dom.g,
				$$ = QW.NodeW;

			var anim1 = new Anim("test1", {
				"top" : {
					by : 350
				}
			}, 3000, Anim.Easing.bounceOut);

			//addEventlistener
			$$("#test1").on("click", function(){
				anim1.start();
				
				setTimeout(function(){
					anim1.reset();
				}, 3500);
			});
		</script>
	</body>
</html>
